<template>
	<view>
		<view class="head">
			<image src="../../static/images/arrow_left.png" mode="" @click="goIndex"></image>
			<view class="">店铺信息</view>
			<view class="f32" @click="seave">保存</view>
		</view>
		<view class="top">
			<view class="via"><image :src="logo" mode=""></image></view>
			<!-- ../../static/images/201916541220.jpg -->
			<view class="shop">
				<view class="shop-o">{{ name }}</view>
				<view class="shop-t">手机号:{{ phone }}</view>
			</view>
			<view class="via-two"><image :src="ImageMall" mode=""></image></view>
		</view>
		<view class="wen"></view>
		<view class="heads" style="margin-top: 0;">
			<view class="box-l">* 店铺名称</view>
			<view class="box-r">
				<input type="text" value="" placeholder="必填" v-model="name" />
				<image src="../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>
		<view class="content">
			<!-- <button type="primary" @tap="openLevel">打开地址</button>
			<text>{{ pickerText }}</text> -->
			<!--
		        mask-bg-color="rgba(0, 229, 238, 0.4)" // 自定义遮罩层背景颜色
		        -->
			<view class="heads" style="margin-top: 0;">
				<view class="box-l">* 所在地区</view>
				<pickerAddress class="f32 c333" @change="change">{{ province == '' ? '点我选择所在地区' : province }}{{ city }}{{ area }}</pickerAddress>
			</view>
		</view>

		<view class="heads">
			<view class="box-l">* 店铺地址</view>
			<view class="box-r"><input type="text" v-model="yong" placeholder="必填" @blur="feikong" /></view>
		</view>
		<view class="heads">
			<view class="box-l">* 手机号</view>
			<view class="box-r">
				<input type="text" v-model="phone" placeholder="必填" @blur="feikong" />
				<image src="../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>
		<view class="heads" style="margin-top: 30rpx;">
			<view class="box-l">联系电话</view>
			<view class="box-r">
				<input type="text" v-model="callPhone" placeholder="选填" />
				<image src="../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>
		<view class="heads" @click="addLogo">
			<view class="box-l">店铺LOGO</view>
			<view class="box-r">
				<view class="bx"></view>
				<image src="../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>
		<view class="heads" @click="addMa">
			<view class="box-l">客户二维码</view>
			<view class="box-r">
				<view class="bx"></view>
				<image src="../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>
		<view class="heads">
			<view class="box-l">客服微信号</view>
			<view class="box-r"><input type="text" placeholder="必填" v-model="wx" @blur="feikong" /></view>
		</view>
		<view class="heads" style="margin-top: 30rpx;">
			<view class="box-l">微店公告</view>
			<view class="box-r"><input type="text" placeholder="选填" v-model="announcement" @blur="feikong" /></view>
		</view>
	</view>
</template>

<script>
import { baseUrl } from '../../common/config.js';
import levelLinkage from '@/components/three-level-linkage/linkage.nvue';
import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue';
export default {
	data() {
		return {
			name: '某某店',
			phone: '必填',
			yong: '',
			pickerValueDefault: [0, 0, 0], //城市选择
			callPhone: '选填',
			wx: '必填', //客服微信号
			announcement: '公告',
			province: '', //省
			city: '', //市
			area: '', //县
			ImageMall: '',
			logo: ''
		};
	},
	onLoad() {
		this.showYe();
	},
	methods: {
		addMa() {
			var that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'],
				success: function(res) {
					uni.showLoading({
						title: '全力上传中'
					});
					uni.uploadFile({
						url: baseUrl + 'api/v1.shop/upload',
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							act: 'direct',
							type: 'wx_qrcode'
						},
						header: {
							token: uni.getStorageSync('userinfo').token
						},
						success: uploadFileRes => {
							uni.hideLoading();

							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});

							// that.ImageMall = JSON.parse(uploadFileRes.data).data.url;

							that.ImageMall = JSON.parse(uploadFileRes.data);
							window.location.reload();
						},
						fail: err => {
							console.log(err);
						}
					});
				}
			});
		},

		addLogo() {
			var that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'],
				success: function(res) {
					uni.showLoading({
						title: '全力上传中'
					});
					uni.uploadFile({
						url: baseUrl + 'api/v1.shop/upload',
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							act: 'direct',
							type: 'logo'
						},
						header: {
							token: uni.getStorageSync('userinfo').token
						},
						success: uploadFileRes => {
							uni.hideLoading();

							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});

							that.logo =JSON.parse(uploadFileRes.data).result.result;
							window.location.reload();
						},
						fail: err => {
							console.log(err);
						}
					});
				}
			});
		},

		change(data) {
			this.province = data.data[0];
			this.city = data.data[1];
			this.area = data.data[2];
		},
		feikong() {
			if (this.yong === '') {
				uni.showToast({
					title: '该选项不可为空',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
		},
		seave() {
			this.$ajax('api/v1.shop/setting', {
				name: this.name,
				mobile: this.phone,
				province: this.province,
				city: this.city,
				telephone: this.callPhone,
				district: this.area,
				address: this.yong,
				wechat: this.wx,
				notice: this.announcement,
				logo: this.logo,
				wx_qrcode: this.ImageMall
			})
				.then(res => {
					console.log(res);
				})
				.catch(res => {
					console.log(Error);
				});
		},

		showYe() {
			this.$ajax('api/v1.shop/index', {}, 'GET').then(res => {
				const { name, mobile, province, city, district, address, wechat, notice, logo, telephone, wx_qrcode } = res.result.shop_info;
				(this.name = name),
					(this.phone = mobile),
					(this.province = province),
					(this.city = city),
					(this.callPhone = telephone),
					(this.area = district),
					(this.yong = address),
					(this.wx = wechat),
					(this.announcement = notice),
					(this.logo = logo);
				this.ImageMall = wx_qrcode;
			});
		},
		goIndex() {
			uni.switchTab({
				url: '../shop/index'
			});
		}
	},
	components: {
		levelLinkage,
		pickerAddress
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.head {
	// height: 88rpx;

	line-height: 88rpx;
	background-color: #249af6;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding: 60rpx 30rpx 0 30rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	image {
		width: 22rpx;
		height: 39rpx;
		margin-top: 25rpx;
	}
}
.wen {
	height: 31rpx;
}
.heads {
	line-height: 110rpx;
	background-color: #ffffff;
	border-bottom: 2rpx solid #eeeeee;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	// padding-top: 60rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	position: relative;
	image {
		width: 18rpx;
		height: 33rpx;
		vertical-align: middle;
		margin-left: 20rpx;
	}
	.box-r {
		.box-l {
			position: absolute;
			left: 0;
		}
		input {
			width: 100%;
			text-align: right;
			height: 100%;
			overflow: hidden;
			padding-left: 100rpx;
			box-sizing: border-box;
		}
		.bx {
			position: absolute;
			right: 100rpx;
		}
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
.top {
	height: 231rpx;
	margin-top: 31rpx;
	padding: 30rpx 41rpx;
	background-color: #249af6;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	.via {
		image {
			height: 150rpx;
			width: 150rpx;
		}
	}
	.shop {
		height: 100%;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);

		.shop-o {
			height: 50%;
			line-height: 20rpx;
		}
		.shop-t {
			height: 50%;
			position: relative;
			top: 28rpx;
		}
	}
	.via-two {
		image {
			width: 65rpx;
			height: 65rpx;
		}
	}
}
</style>
